<template>
  <div class="flex just-space">
    <nav class="pagination" role="navigation" aria-label="pagination">
      <ul class="pagination-list">
        <li>
          <a class="pagination-link is-theme-page">
            <i class="fas fa-angle-left"></i>
          </a>
        </li>
        <li v-for="i in 5" :key="i">
          <a
            class="pagination-link is-theme-page"
            :class="{ 'is-theme-current-page': i == 1 }"
            >{{ i }}</a
          >
        </li>
        <li>
          <span
            class="pagination-ellipsis"
            style="font-weight: bold; color: #000"
            >…</span
          >
        </li>
        <li>
          <a class="pagination-link is-theme-page">2999</a>
        </li>
        <li>
          <a class="pagination-link is-theme-page">
            <i class="fas fa-angle-right"></i>
          </a>
        </li>
      </ul>
    </nav>

    <div class="page-right">
      <span>第 1/2999 页</span>
      <span>到第</span>
      <input type="tel" class="input is-small" style="width: 42px" />
      <span>页</span>
      <button class="button is-small is-theme-button-ac">确定</button>
    </div>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
.page-right {
  display: flex;
  align-items: center;
  span {
    font-size: 14px;
    font-weight: 400;
    color: #545759;
    line-height: 14px;
    margin: 0 4px;
  }
}
</style>
